<ol class="breadcrumb panel">
    <li><a href="#">首页</a></li>
    <li><a href="#">接口</a></li>
    <li class="active">添加接口</li>
</ol>
<div class="panel panel-default " ng-init="getGroups()">
    <form editable-form="" name="formValidate" novalidate="" class="form-validate form-horizontal" onaftersave="saveTable()" oncancel="cancel()">
        <div class="panel-heading"><h4>添加接口</h4></div>
        <div class="panel-body">
            <form class="form-horizontal">
                <div class="form-group">
                    <label class="col-lg-2 control-label"><span class="text-danger">*&nbsp;&nbsp;&nbsp;</span>接口名称：</label>
                    <div class="col-lg-6">
                        <input type="text" class="form-control" name="name" ng-model="interface.name" required/>
                        <span ng-show="validateInput('name', 'required')" class="text-danger">This field is required</span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-2 control-label">接口用途：</label>
                    <div class="col-lg-6">
                        <input type="text" class="form-control" ng-model="interface.desc" required/>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-2 control-label">*选择分组：</label>
                    <div class="col-lg-6">
                        <select name="account" class="form-control" ng-model="interface.groupId"
                                ng-options="group._id as group.name for group in groups">
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-2 control-label">*请求方法：</label>
                    <div class="col-lg-6">
                        <select name="account" class="form-control" ng-model="interface.method">
                            <option value="GET">GET</option>
                            <option value="POST">POST</option>
                            <option value="PUT">PUT</option>
                            <option value="DELETE">DELETE</option>
                            <option value="PATCH">PATCH</option>
                            <option value="HEAD">HEAD</option>
                            <option value="OPTIONS">OPTIONS</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-2 control-label">文档类型：</label>
                    <div class="col-lg-6">
                        <select name="contentType" class="form-control" ng-model="interface.contentType">
                            <option value="application/json">application/json</option>
                            <option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-2 control-label">*请求地址：</label>
                    <div class="col-lg-6">
                        <input type="text" class="form-control" placeholder="接口调用地址，一般填写PATH，示例：/Api/getDownloadTimes"
                               ng-model="interface.path" required/>
                    </div>
                </div>

                <!--<div class="form-group">
                    <label class="col-lg-2 control-label">请求参数：</label>
                    <div class="col-lg-6">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>名称</th>
                                <th>类型</th>
                                <th>是否必须</th>
                                <th>描述</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>-->

                <!-- Editable row-->
                <div class="form-group">
                    <label class="col-lg-2 control-label">*请求参数：</label>
                    <div class="col-lg-6">
                        <table class="table table-bordered table-hover bg-white">
                            <tr style="font-weight: bold">
                                <td style="width:20%">名称</td>
                                <td style="width:20%">类型</td>
                                <td style="width:60%">描述</td>
                                <td style="width:30%">
                                    <span ng-show="formValidate.$visible">Action</span>
                                </td>
                            </tr>
                            <tr ng-repeat="user in users | filter:filterUser">
                                <td>
                                    <!-- editable username (text with validation)-->
                                    <span editable-text="user.name" e-form="formValidate" onbeforesave="checkName($data, user.id)" style="width: 50px;">{{ user.name || &apos;empty&apos; }}</span>
                                </td>
                                <td>
                                    <!-- editable status (select-local)-->
                                    <span editable-select="user.status" e-form="formValidate" e-ng-options="s.value as s.text for s in statuses">{{ showStatus(user) }}</span>
                                </td>
                                <td>
                                    <!-- editable group (select-remote)-->
                                    <span editable-text="user.desc" e-form="formValidate" onbeforesave="checkName($data, user.desc)">{{ user.desc || &apos;empty&apos; }}</span>
                                </td>
                                <td>
                                    <button type="button" ng-show="formValidate.$visible" ng-click="deleteUser(user.id)" class="btn btn-danger pull-right">
                                        <em class="fa fa-trash"></em>
                                    </button>
                                </td>
                            </tr>
                        </table>
                        <!-- buttons-->
                        <div class="btn-edit">
                            <button type="button" ng-show="!formValidate.$visible" ng-click="formValidate.$show()" class="btn btn-default">edit</button>
                        </div>
                        <div ng-show="formValidate.$visible" class="btn-form">
                            <button type="button" ng-disabled="formValidate.$waiting" ng-click="addUser()" class="btn btn-default pull-right">add row</button>
                            <button type="submit" ng-disabled="formValidate.$waiting" class="btn btn-info">save</button>
                            <button type="button" ng-disabled="formValidate.$waiting" ng-click="formValidate.$cancel()" class="btn btn-default">cancel</button>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-2 control-label">请求参数：</label>
                    <div class="col-lg-6">
                        <textarea class="form-control col-lg-10" rows="4" ng-model="interface.request" required></textarea>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-2 control-label">返回参数：</label>
                    <div class="col-lg-6">
                        <textarea class="form-control col-lg-10" rows="4" ng-model="interface.response" required></textarea>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-2 control-label"><span class="text-danger">*&nbsp;&nbsp;&nbsp;</span>备注信息：</label>
                    <div class="col-lg-6">
                        <textarea class="form-control col-lg-10" rows="4" name="remark" ng-model="interface.remark" required></textarea>
                        <span ng-show="validateInput('remark', 'required')" class="text-danger">This field is required</span>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-lg-offset-2 col-lg-6">
                        <button type="submit" ng-click="create()" class="btn btn-primary btn-block">保存</button>
                    </div>
                </div>
            </form>

        </div>
    </form>

    <toaster-container toaster-options="{'position-class': 'toast-bottom-right', 'close-button':true}"></toaster-container>
</div>
